﻿var app = Vue.createApp({
    data() {
        return {
            systemTitle: "Single Sugar 1.0",
            loading: false,
            isSmallWidth: true,
            menuCollapse: false,
            layoutPage: null,
            layoutPageDialog: null,
            layoutHeader: null
        };
    },
    methods: {
        init() {
            var that = this;
            that.registerComps();
            that.widthObserver();
            $(".work-init-loading").fadeOut();
        },
        registerComps() {
            this.layoutPage = this.$refs.layout_page_ref;
            this.layoutPageDialog = this.$refs.layout_page_dialog_ref;
            this.layoutMenu = this.$refs.layout_menu_ref;
            this.layoutHeader = this.$refs.layout_header_ref;
        },
        widthObserver() {
            var observer = new ResizeObserver(this.setSmallWidth);
            observer.observe(document.getElementById('app'));
        },
        setSmallWidth(entries) {
            this.isSmallWidth = entries[0].contentRect.width < 600;
            if (this.isSmallWidth) this.menuCollapse = true;
        },
        setMenuCollapse(collapse) {
            this.menuCollapse = collapse;
        },
        showMenu() {
            this.layoutMenu.open();
        },
        menuClick(menu) {
            var that = this;
            switch (menu.Type) {
                case "href":
                case "iframe":
                    that.layoutHeader.tabAdd(menu);
                    break;
                case "dialog":
                    that.layoutPageDialog.loadDialog(menu.Title, menu.Src);
                    break;
                default: break;
            }
        },
        tabChange(item, refresh) {
            this.layoutPage.loadPage(item.name, item.id, item.type, item.path, refresh);
        },
        tabDelete(name) {
            this.layoutPage.deleteComponent(name);
        },
        logoDblClick() {
            this.layoutMenu.init();
        },
        pageLoaded(item) {

        },
        pageLoadError(name) {
            this.layoutHeader.tabRemove(name);
        }
    },
    mounted() { var that = app.that = this; that.init(); }
});